<!DOCTYPE html>
<html>
<head lang="zh-CN">
    <meta charset="UTF-8">
    <meta name="viewport" content=" initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black">
    <meta name="format-detection" content="telephone=no">
    <title>自提订单</title>
    <link href="{$Think.config.RESOURCEURL}wx_assets/css/common.css{$Think.config.RESOURCE_VER}" rel="stylesheet" type="text/css">
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.1.1.3.min.js{$Think.config.RESOURCE_VER}"></script>
    <script type="text/javascript" src="{$Think.config.RESOURCEURL}wx_assets/js/zepto.alert.js{$Think.config.RESOURCE_VER}"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/util.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <script src="http://res.wx.qq.com/open/js/jweixin-1.0.0.js"></script>
    <script src="{$Think.config.RESOURCEURL}wx_assets/js/wx_share.js{$Think.config.RESOURCE_VER}" type="text/javascript"></script>
    <link href="{$Think.config.RESOURCEURL}wx_assets/iconfont/iconfont.css{$Think.config.RESOURCE_VER}" rel="stylesheet">
    <style>
        @font-face {
            font-family: 'iconf';
            src: url('//at.alicdn.com/t/font_1462783003_3582804.eot'); /* IE9*/
            src: url('//at.alicdn.com/t/font_1462783003_3582804.eot?#iefix') format('embedded-opentype'), /* IE6-IE8 */
            url('//at.alicdn.com/t/font_1462783003_3582804.woff') format('woff'), /* chrome、firefox */
            url('//at.alicdn.com/t/font_1462783003_3582804.ttf') format('truetype'), /* chrome、firefox、opera、Safari, Android, iOS 4.2+*/
            url('//at.alicdn.com/t/font_1462783003_3582804.svg#iconfont') format('svg'); /* iOS 4.1- */
        }
        .iconf
        {
            font-family: 'iconf' !important;
        }
        i{
            font-style: normal;
        }
        .sq-top
        {
            height: 50px;
            padding: 0px 50px;
            background: #ff8f12;
            color: white;
            position: relative;
            z-index: 2;

        }
        .sq-top a.sq-btn-top
        {
            display: block;
            width: 50px;
            height: 50px;
            line-height: 50px;
            text-align: center;
            color: white;
            position: absolute;
            top: 0px;
            font-size: 22px;
            left:0px;
        }
        .sq-top a.sq-btn-top.back-btn
        {
            padding-left: 5px;
            width: 80px;
        }
        .sq-top a.sq-btn-top > span
        {
            font-size: 13px;
        }
        .sq-top .middle
        {
            line-height: 50px;
            text-align: center;
            color: white;
            font-size:20px;
        }
        body{
            background-color: #F5F5F5;
            color:#333;
        }
        .address{
            background-color:white;
            padding:10px;
            position:relative;
            border-bottom:1px solid #DDDDDD;
        }
        .address>p{
            margin:5px 0;
        }
        .weixinInfo{
            position:absolute;
            top:10px;
            right:10px;
        }
        .weixinInfo>img{
            width:34px;
            height:34px;
            border-radius:50%;
            margin-right:5px;
        }
        .weixinInfo>span{
            color:#9C999C;
            vertical-align: top;
            line-height: 34px;
        }
        .orderInfo{
            background-color:white;
            padding:10px;
            margin-top:10px;
            border-top:1px solid #ddd;
            border-bottom:1px solid #ddd;
        }
        .orderInfo .picurl{
            width:90px;
            height:90px;
            display: inline-block;
            position:relative;
        }
        .orderInfo .picurl>img{
            max-width:100%;
            max-height:100%;
            position:absolute;
            top:50%;
            left:50%;
            border-radius:4px;
            transform: translate(-50%,-50%);
            -webkit-transform: translate(-50%,-50%);
        }
        .orderInfo li{
            padding: 10px 0;
            border-bottom: 1px solid #EFEFEF;
        }
        .orderInfo .proInfo{
            margin-left: 10px;
            display: inline-block;
            width:-webkit-calc(100% - 100px);
            vertical-align: top;
        }
        .orderInfo .proInfo .name{
            -webkit-line-clamp: 2;
            height: 43px;
            overflow: hidden;
            text-overflow: ellipsis;
            display: -webkit-box;
            -webkit-box-orient: vertical;
        }
        .orderInfo .proInfo .spec{
            margin: 8px 0;
        }
        .orderInfo .proInfo .spec p{
            display: inline-block;
        }
        .orderInfo .proInfo .spec p span{
            border: 1px solid #CCCCCC;
            color: #CCCCCC;
            padding: 3px 0;
            margin: 0 3px;
        }
        .orange{
            color:#FF8F12;
        }
        .orderInfo .order p{
            margin: 5px 0;
        }
        .status{
            background-color:#FF8F12;
            color:white;
            text-align: center;
            border-radius:4px;
            height:44px;
            line-height:44px;
            display:block;
            margin:30px 10px 10px;
            font-size:18px;
        }
        .layer-wrapper {
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
            display: none;
            justify-content: center;
            align-items: center;
        }
        .bg {
            background: rgba(0, 0, 0, .5);
            position: fixed;
            left: 0;
            top: 0;
            width: 100vw;
            height: 100vh;
        }
        .code-layer {
            position: relative;
            z-index: 1000;
            background: #fff;
            opacity: 1;
            border-radius: 5px;
            box-shadow: none;
            padding: 0;
        }
        .code-layer .title {
            display: flex;
            justify-content: space-between;
            align-items: center;
            padding: 10px;
            border-bottom: 1px solid #ccc;
        }
        .code-layer {
            width: 80vw;
            margin: 0 12px;
            position: relative;
            background-color: #FFF;
        }
        .code-layer ul {
            height: 30px;
            width: 80%;
            display: flex;
            margin: 30px auto 20px;
            border: 1px solid #ccc;
        }
        .code-layer li {
            flex: 1;
            position: relative;
            display: flex;
            justify-content: center;
            align-items: center;
        }
        .code-layer li i {
            display: none;
            width: 6px;
            height: 6px;
            border-radius: 50%;
            background-color: #000;
            position: absolute;
            top: 50%;
        }
        .code-layer li:not(:last-child):after {
            content: '';
            width: 1px;
            height: 100%;
            position: absolute;
            right: 0;
            top: 0;
            background-color: #ccc;
        }
    </style>
</head>
<body>
<div class="sq-top">
    <a  class="sq-btn-top" onclick="back()"><i class="iconf">&#xe603;</i></a>
    <div class="middle">
        订单详情
    </div>
</div>
<div class="main">
    <div class="address">
        <div class="weixinInfo">
            <img src="{$headimgurl}"/>
            <span>{$nickname}</span>
        </div>
        <p>买家:{$fullName}</p>
        <p>电话:{$phone}</p>
        <if condition="$deliveryType neq 'pickup' and $address neq ''">
            <p>地址:{$address}</p>
        </if>
    </div>
    <div class="orderInfo">
        <ul>
            <volist name="detail" id="product">
                <li>
                    <div class="picurl">
                        <img src="{$product.picUrl1.picUrl}"/>
                    </div>
                    <div class="proInfo">
                        <div class="name">{$product.name}</div>
                        <div class="spec">
                            <if condition="$product.firstSpecificName neq ''">
                                <p>规格&nbsp;&nbsp;<span>{$product.firstSpecificName}</span>
                                    <if condition="$product.secSpecificName neq ''">
                                        <span>{$product.secSpecificName}</span>
                                    </if>
                                </p>
                                <else/>
                                <p></p>
                            </if>
                            <p style="float:right">x{$product.count}</p>
                        </div>
                        <div class="price">金额：<span class="orange">¥ {$product.price}</span></div>
                    </div>
                </li>
            </volist>
        </ul>
        <div class="order" style="margin-top:10px">
            <p>订单总额：<span class="orange">¥ {$price}</span></p>
            <p>订单状态：<span class="orange">
                <if condition="$status eq 'ok'">[交易成功]
        <elseif condition="$status eq 'closed'"/>[交易关闭]
        <elseif condition="$status eq 'paying'"/>[等待付款]
        <elseif condition="$status eq 'delivering'"/>[等待发货]
        <elseif condition="$status eq 'deliveringtostore'"/>[待配送到自提点]
        <elseif condition="$status eq 'delivered'"/>[已发货]
        <elseif condition="$status eq 'deliveredtostore'"/>[已配送到自提点]
        <elseif condition="$status eq 'notsubmit'" />[未提交]
        <elseif condition="$status eq 'refund'"/>[已退款]
        <elseif condition="$status eq 'refundedpart'"/>[已部分退款]
        <elseif condition="$status eq 'refunding'"/>[退款中]
        <elseif condition="$status eq 'payingconfirm'"/>[付款确认中]
        <elseif condition="$status eq 'paypart'"/>[部分付款]
        <elseif condition="$status eq 'partake'"/>[已参与夺宝]
        <elseif condition="$status eq 'teaming'"/>[组团中]
        <elseif condition="$status eq 'ordersign'"/>[已报名]
        <elseif condition="$status eq 'confirmsign'"/>[已确认报名]
        <elseif condition="$status eq 'canclesign'"/>[已取消报名]
        <elseif condition="$status eq 'supported'"/>[众筹中]
        <else />[状态错误]
    </if>
            </span></p>
            <p>订单编号：{$serialNumber}</p>
            <p>订单日期：{$payTime}</p>
            <p>配送自提点：{$storeResourceName}</p>
            <p>买家备注：{$remark}</p>
        </div>
    </div>
    <if condition="$status eq 'deliveringtostore'">
        <a class="status">已配送到自提点</a>
        <elseif condition="$status eq 'deliveredtostore'"/>
        <a class="status">交易完成</a>
    </if>

    <div class="layer-wrapper">
        <div class="bg"></div>
        <div class="code-layer">
            <div class="title">
                <span class="tips">请输入8位提货码</span>
                <i class="iconfont close">&#xe633;</i>
            </div>
            <ul class="keyboard-password">
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
                <li></li>
            </ul>
            <input type="number" maxlength="2" class="code" style="opacity: 0; caret-color: transparent;" />
        </div>
    </div>

</div>
<script type="text/javascript">
    var baseUrl = '{$Think.config.SERVER_HOST}';
    function Page() {
        this.newPwd = '';
        this.nextPwd = '';
        this.isLoading = false;
    };

    $.extend(Page.prototype, {
        init: function () {
            this.bindEvents();
            $('.code')[0].focus();
        },

        // 绑定事件
        bindEvents: function() {
            $('.code').on('input', $.proxy(this.handleCodeChange, this));
            $('.keyboard-password').click($.proxy(this.handlekeyboardPasswordClick, this));
            $(".status").click($.proxy(this.handleStatusBtnClick, this));
            $('.close').click($.proxy(this.handleCloseBtnClick, this));
        },

        handleStatusBtnClick: function () {
            var self = this;
            if ('{$status}' == 'deliveredtostore') {
                $('.layer-wrapper').css('display', 'flex');
                $('.code')[0].focus();
            } else {
                $.util.ok("确认修改该订单状态？", function () {
                    self.submit();
                })
            }
        },

        handleCloseBtnClick: function () {
            $('.layer-wrapper').hide();
        },

        // 提货码变化时执行
        handleCodeChange: function() {
            var code = $('.code').val();
            var length = code.length;
            console.log(code, length)
            $('.keyboard-password li').text('')
            for (var i = 0; i < length; i++) {
                $('.keyboard-password li').eq(i).text(code.charAt(i))
            }
            if (length >= 8) this.submit();
        },

        // 调用接口改变状态
        submit: function() {

            try {
                var cUserId = $.util.cookie('employeeId');
            } catch (err) {
                $.util.alert('cookie失效，请先退出后重新进入员工终端再试！')
            }
            var self = this;
            var params = {
               "id":'{$id}',
               pCode: ($('.code').val()).substring(0, 8),
               cUserId: cUserId
            };
            $.ajax({
                type: "get",
                url: '{$Think.config.SERVER_HOST}call.json?customerId={$customerId}',
                dataType: 'json',
                data: {
                module: 'employeeManage',
                method: 'updateOrder',
                params: JSON.stringify(params)
                },
                success: $.proxy(this.handleSubmitSucc, this)
            });
        },

        // 调用接口提交成功后执行
        handleSubmitSucc: function(res) {
            if (+res.code === 0) {
                this.relaod()
            } else {
                $.util.alert(res.msg);
                $('.code').val('');
                $('.keyboard-password li').text('');
            }
        },

        // 点击支付密码框时input获取焦点
        handlekeyboardPasswordClick: function() {
            $('.code')[0].focus();
        },

        relaod: function(){
            var p=$.util.getParamAsObject();
            if(!p){p={};}
            var myDate = new Date();
            var time = myDate.getSeconds()+""+myDate.getMilliseconds();
            p.v=time;
            p=encodeURIComponent(JSON.stringify(p));
            location.href = '{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=employeeManage&method=orderDetail&params='+p;
            $.util.pageLoading.hide();
        }
    });

    var page = new Page();
    page.init();

    function back(){
        location.href = '{$Think.config.SERVER_HOST}call.html?customerId={$customerId}&module=employeeManage&method=index';
    }

    wx_share.init({
                "pkg":{
                    "appId": '{$pkg.appId}',
                    "timestamp": '{$pkg.timestamp}',
                "nonceStr": '{$pkg.nonceStr}',
                "signature": '{$pkg.signature}'
            },
            hide:1
    });
</script>
</body>
</html>